<script setup lang="ts">
/* 表格配置项常量 */
import {readonly, ref} from 'vue'
import {VxeColumnPropTypes, VxeTableDataRow, VxeTablePropTypes} from 'vxe-table'

const allAlign = ref<VxeTablePropTypes.Align>(null)
const editConfig = readonly<VxeTableDataRow>({trigger: 'click', mode: 'cell'})
const rowConfig = readonly<VxeTableDataRow>({height: 35, isHover: true, isCurrent: true})
const editRenderConfig = readonly({autofocus: '.vxe-input--inner'})

const data1 = ref([{
  id: 'xxx',
  indicator: 'xxx',
  target: '1500',
  value: '1500',
  unit: '',
},])

interface RowVO {
  id: number
  unit: ''
}
// 基础指标设置表格 目标值栏 数据格式化
const targetFormatterFn: VxeColumnPropTypes.Formatter<RowVO> = (
  {cellValue, row, /* column */}
) => `${cellValue}${row.unit}`

</script>

<template>
  <VxeTable
    stripe
    show-overflow
    max-height="auto"
    :edit-config="editConfig"
    :row-config="rowConfig"
    :align="allAlign"
    :data="data1">
    <VxeColumn field="indicator" title="指标" :edit-render="editRenderConfig">
      <template #edit="{ row }">
        <vxe-input style="width: 12em;" v-model="row.indicator" type="text"/>
      </template>
    </VxeColumn>
    <VxeColumn field="value" :formatter="targetFormatterFn" title="目标值" :edit-render="editRenderConfig">
      <template #edit="{ row }">
        <vxe-input style="width: 12em;" v-model="row.value" type="text"/>
      </template>
    </VxeColumn>
  </VxeTable>
</template>

<style scoped lang="scss">
</style>
